<template>
    <div class="productTable">
        <div class="">
            <el-divider class="topLine"><i class="lineIcon el-icon-document-copy"></i><span
                    class="lineTitle">{{module.name}}模块-产品表列表</span></el-divider>
        </div>

        <div class="returnOPT">
            <router-link to="/business/module/set">
                <el-button class="returnBTN" type="success">
                    <span class="returnIco glyphicon glyphicon-log-in" aria-hidden="true"></span>
                    <span class="returnFont">返回主模块</span>
                </el-button>
            </router-link>
        </div>
        <div class="batchOPT">
            <el-button class="batchBTN" @click="toggleSelection([products[1],products[2]])">批量删除</el-button>
        </div>
        <div class="addProduct">
            <el-button class="addBTN" type="primary" icon="el-icon-circle-plus-outline" @click="addProduct">新增
            </el-button>
        </div>
        <!--:data绑定data中预设的参数
        单行显示:show-overflow-tooltip="true"
        如果为tr，则需要v-for="(product,index) of products" :key="index"
        -->
        <el-table
                ref="multipleTable"
                tooltip-effect="dark"
                @selection-change="handleSelectionChange"
                :data="products"
                :show-overflow-tooltip="true"
                border
                style="width: 100%"
                class="previous-row"
                :header-cell-style="{backgroundImage:'linear-gradient(#ff6e02,#ff6d00)',color:'#ffffff',}"
        >

            <el-table-column type="selection" width="35">
            </el-table-column>
            <el-table-column
                    sortable
                    fixed
                    prop="uniId"
                    label="ID"
                    width="60"
                    :show-overflow-tooltip="true"
            >
            </el-table-column>

            <!--<el-table-column
                    sortable
                    fixed
                    prop="moduleId"
                    label="关联"
                    width="60"
                    :show-overflow-tooltip="true"
            >
            </el-table-column>-->

            <el-table-column
                    sortable
                    fixed
                    prop="name"
                    label="产品标题"
                    width="100"
                    :show-overflow-tooltip="true"
            >
            </el-table-column>

            <el-table-column
                    sortable
                    prop="seoTitle"
                    label="seo标题"
            >
            </el-table-column>

            <!--<el-table-column
                    sortable
                    fixed
                    prop="seoDescription"
                    label="seo描述"
                    width="100"
                    :show-overflow-tooltip="true"
            >
            </el-table-column>-->

            <!--<el-table-column
                    sortable
                    fixed
                    prop="picList"
                    label="产品图片列表"
                    width="60"
                    :show-overflow-tooltip="true"
            >
            </el-table-column>

            <el-table-column
                    sortable
                    fixed
                    prop="productVideo"
                    label="产品视频"
                    width="60"
                    :show-overflow-tooltip="true"
            >
            </el-table-column>

            <el-table-column
                    sortable
                    fixed
                    prop="productVod"
                    label="VOD"
                    width="60"
                    :show-overflow-tooltip="true"
            >
            </el-table-column>

            <el-table-column
                    sortable
                    fixed
                    prop="videoCover"
                    label="视频封面"
                    width="60"
                    :show-overflow-tooltip="true"
            >
            </el-table-column>

            <el-table-column
                    sortable
                    fixed
                    prop="videoTitle"
                    label="视频标题"
                    width="60"
                    :show-overflow-tooltip="true"
            >
            </el-table-column>

            <el-table-column
                    sortable
                    fixed
                    prop="videoDesc"
                    label="视频介绍"
                    width="60"
                    :show-overflow-tooltip="true"
            >
            </el-table-column>-->
            <el-table-column
                    sortable
                    fixed
                    prop="price"
                    label="原价"
                    width="90"
                    :show-overflow-tooltip="true"
            >
            </el-table-column>
            <el-table-column
                    sortable
                    fixed
                    prop="memberPrice"
                    label="会员价"
                    width="90"
                    :show-overflow-tooltip="true"
            >
            </el-table-column>
            <el-table-column
                             sortable
                             prop="typeId"
                             label="产品类型"
                             width="120">
                <template slot-scope="scope">
                    <el-tag :type="scope.row.typeId === 10 ? 'default'
                        :scope.row.typeId===12?'success'
                        :scope.row.typeId === 13?'info'
                        :scope.row.typeId === 14 || scope.row.typeId === 16? 'primary'
                        :scope.row.typeId === 15?'warning':'danger'"
                            id="typeIds" size="mini" disable-transitions>{{PRODUCT_TYPE |
                        optionObjectKV(scope.row.typeId)}}
                    </el-tag>
                </template>
            </el-table-column>
            <!--<el-table-column
                    sortable
                    prop="videoTime"
                    label="时长"
                    width="80"

            >
            </el-table-column>

            <el-table-column
                    sortable
                    prop="videoCharge"
                    label="收费"
                    width="60"

            >
                <template slot-scope="scope">
                    <el-tag :type="scope.row.videoCharge === 'F' ? 'primary' : 'danger'"
                            size="mini" disable-transitions>{{charge | optionObjectKV(scope.row.videoCharge)}}
                    </el-tag>
                </template>
            </el-table-column>-->

            <!--<el-table-column
                    sortable
                    fixed
                    prop="videoType"
                    label="视频分类"
                    width="100"
                    :show-overflow-tooltip="true"
            >
                <template slot-scope="scope">
                    <el-tag :type="scope.row.videoType === 'P' ||  scope.row.videoType === 'I'? 'primary' : 'success'"
                            size="mini" disable-transitions>{{options | optionObjectKV(scope.row.videoType)}}</el-tag>
                </template>
            </el-table-column>

            <el-table-column
                    sortable
                    fixed
                    prop="videoUserId"
                    label="关联"
                    width="60"
                    :show-overflow-tooltip="true"
            >
            </el-table-column>-->

            <!--<el-table-column
                    sortable
                    prop="path"
                    label="产品路径"
                    width="100"
                    :show-overflow-tooltip="true"
            >
            </el-table-column>-->

            <el-table-column
                    sortable
                    prop="isShow"
                    label="显示"
                    width="60"
                    :show-overflow-tooltip="true"
            >
                <template slot-scope="scope">
                    <el-switch
                            v-model="scope.row.isShow"
                            active-color="#13ce66"
                            inactive-color="#ff4949"
                            :active-value="1"
                            :inactive-value="0"
                            @change="updateShow(scope.row)"
                    >
                    </el-switch>
                </template>
            </el-table-column>

            <!--<el-table-column
                    sortable
                    fixed
                    prop="productContent"
                    label="产品内容"
                    width="60"
                    :show-overflow-tooltip="true"
            >
            </el-table-column>-->

            <el-table-column
                    sortable
                    prop="clickNum"
                    label="点击量"
                    width="80"
                    :show-overflow-tooltip="true"
            >
            </el-table-column>

            <el-table-column
                    sortable
                    prop="sort"
                    label="排序"
                    width="60"
                    :show-overflow-tooltip="true"
            >
            </el-table-column>

            <el-table-column
                    sortable
                    prop="level"
                    label="级别"
                    width="60"
                    :show-overflow-tooltip="true"
            >
                <template slot-scope="scope">
                    <el-tag :type="scope.row.level === 1 ? 'primary' : 'success'"
                            size="mini" disable-transitions>{{level | optionObjectKV(scope.row.level)}}
                    </el-tag>
                </template>
            </el-table-column>

            <el-table-column
                    sortable
                    prop="status"
                    label="状态"
                    width="60"
                    :show-overflow-tooltip="true"
            >
                <template slot-scope="scope">
                    <el-tag :type="scope.row.status === 'D' ? 'success' : 'primary'"
                            size="mini" disable-transitions>{{status | optionObjectKV(scope.row.status)}}
                    </el-tag>
                </template>
            </el-table-column>

            <el-table-column
                    sortable
                    prop="indexShow"
                    label="首页推荐"
                    width="100"
                    :show-overflow-tooltip="true"
            >
                <template slot-scope="scope">
                    <el-switch
                            v-model="scope.row.indexShow"
                            active-color="#409EFF"
                            inactive-color="#DCDFE6"
                            :active-value="INDEX_SHOW.SHOW.key"
                            :inactive-value="INDEX_SHOW.UNSHOW.key"
                            @change="updateShow(scope.row)"
                    >
                    </el-switch>
                </template>
            </el-table-column>

            <!--<el-table-column
                    sortable
                    prop="createTime"
                    label="创建时间"
                    width="120"
                    :show-overflow-tooltip="true"
            >
            </el-table-column>-->

            <el-table-column
                    sortable
                    prop="updateTime"
                    label="修改时间"
                    width="150"
                    :show-overflow-tooltip="true"
            >
            </el-table-column>

            <!--<el-table-column
                    sortable
                    fixed
                    prop="iCreateTime"
                    label="int创建时间"
                    width="60"
                    :show-overflow-tooltip="true"
            >
            </el-table-column>

            <el-table-column
                    sortable
                    fixed
                    prop="iUpdateTime"
                    label="int修改时间"
                    width="60"
                    :show-overflow-tooltip="true"
            >
            </el-table-column>-->

            <!--<el-table-column
                    sortable
                    fixed
                    prop="enrollBuy"
                    label="预购"
                    width="60"
                    :show-overflow-tooltip="true"
            >
            </el-table-column>-->

            <el-table-column
                    class="optionList"
                    fixed="right"
                    label="操作"
                    width="330"
                    >
                <!--使用slot-scope传递当前行参数-->
                <template slot-scope="scope">
                    <el-button class="videoVODPlay"
                               size="mini"
                               type="primary"
                               icon="el-icon-video-camera-solid"
                               @click="showVideo(scope.row)">播放
                    </el-button>
                    <el-button
                            size="mini"
                            type="primary"
                            @click="edit(scope.row)">编辑
                    </el-button>
                    <el-button
                            size="mini"
                            type="warning"
                            @click="del">排序
                    </el-button>
                    <el-button
                            size="mini"
                            type="danger"
                            @click="del(scope.row)">删除
                    </el-button>
                </template>

            </el-table-column>
        </el-table>


        <div class="pageHelper">
            <el-button class="flushBTN" type="primary" @click="pageList(1)">刷新数据</el-button>
            <page-helper ref="pageHelper" :list="pageList"></page-helper>

        </div>
        <dialog-player ref="vodDialogPlayer"></dialog-player>
    </div>
</template>

<script>
    import PageHelper from "../../../components/PageHelper";
    import DialogPlayer from "../../../components/DialogPlayer";
    export default {
        name: "ProductSet",
        //引用组件
        components: {PageHelper,DialogPlayer},
        data() {
            return {
                message: '这里是大模块-产品表内容页',
                products: [],
                product: {},
                module: {},
                options: VIDEO_TYPE,
                charge: VIDEO_CHARGE,
                isShow: YES_OR_NO,
                level: LEVEL,
                PRODUCT_TYPE: PRODUCT_TYPE,
                status: STATUS,
                centerDialogVisible: false,
                INDEX_SHOW: INDEX_SHOW,
            }
        },
        mounted() {
            //1.普通列表查询
            this.list();
            //自定义赋值分页每页行数
            this.$refs.pageHelper.size = 10;

            //读取sessionStorage缓存的module数据
            //如果为页面直接进入。这里没有获取到session数据，那么为空，避免页面报错
            let module = SessionStorage.get(MODULE_SUB_ARTICLE) || {};
            if (Tool.isEmpty(module)) {
                this.$router.push("/system/site/data");
            }
            this.module = module;
            //2.分页列表查询，默认初始化执行第一页
            this.pageList(1);
        },
        methods: {
            //多选的方法
            toggleSelection(rows) {
                if (rows) {
                    rows.forEach(row => {
                        this.$refs.multipleTable.toggleRowSelection(row);
                    });
                } else {
                    this.$refs.multipleTable.clearSelection();
                }
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            //1.list查询
            list() {
                this.$axios.get(process.env.VUE_APP_SERVER + '/business/admin/product/dtoList')
                    .then((response) => {
                        console.log("模块-产品表列表：", response);
                    })
            },
            //2.查询当前页，需要设置变量传入pageHelper分页插件
            pageList(page) {
                Loadings.show();
                this.$axios.post(process.env.VUE_APP_SERVER + '/business/admin/product/pageList', {
                    currentPage: page, //向后端发送参数。当前页
                    size: this.$refs.pageHelper.size, //引用传入组件后，在标签中refs定义的别名
                }).then((response) => {
                    Loadings.hide();
                    let resp = response.data;
                    this.products = resp.responseData.listPageData;

                    this.$refs.pageHelper.render(page, resp.responseData.totalSize);

                })
            },
            //3.新增product
            addProduct() {
                //可以在这里清空product:this.products=null;
                SessionStorage.set(PRODUCT_MODULE_PARENTID, this.module.parentId);
                SessionStorage.set(PRODUCT_MODULE_ID, this.module.uniId);
                this.$router.push("/business/product/add");
            },
            //4.修改
            edit(product) {
                /*jquery继承对象： $.extend({新对象},旧对象)
                避免vue数据绑定漏洞，更改数据时，随之更改显示的data，但实际没有进行真实保存数据库
                 */
                this.product = $.extend({}, product);

                SessionStorage.set(PRODUCT_MODULE_PARENTID, this.module.parentId);
                //加载article的文件列表
                Loadings.show();
                this.$axios.get(process.env.VUE_APP_SERVER + '/source/admin/file/list/' + product.uniId)
                    .then((response) => {
                        let resp = response.data;
                        if (resp.success) {
                            SessionStorage.set(FILE_LIST, resp.responseData);
                            Loadings.hide();
                        }
                    });
                this.$router.push({
                    name: "business/product/add",
                    params: {product}
                });
            },
            del(product) {
                /**
                 * 前端=》路径内携带参数使用url：'../'+{param}
                 * 后端=》requestMapping('../{param}')
                 *       void ...(@PathVariable String {param})
                 *
                 * ***引用toast的showConfirm全局方法，需要定义局部变量_this
                 * ***并且将存入的product转化为局部对象，才能获取到uniId
                 */
                let _this = this;
                let productParam = product;
                toast.showConfirm(product.name, function () {
                        _this.$axios.delete(process.env.VUE_APP_SERVER + '/business/admin/product/del/' + productParam.uniId)
                            .then((response) => {

                                let resp = response.data;
                                if (resp.success) {
                                    _this.pageList(1);
                                }
                            })

                    }
                )
            },
            //更新显示show
            updateShow(row) {

                this.product = row;
                let responseMsg = '';
                //前端校验
                this.$axios.post(process.env.VUE_APP_SERVER + '/business/admin/product/save', this.product)
                    .then((response) => {
                        let resp = response.data;
                        responseMsg = response;

                        if (resp.success) {
                            this.pageList(1);
                            //引入全局变量toast提示
                            toast.success("保存成功", "bottom-end");
                        } else {
                            this.$notify({
                                title: '修改失败，请联系管理员!',
                                message: resp.responseMsg,
                                position: "top-right",
                                type: 'warning'
                            });
                        }
                    });
            },
            showVideo(product) {
                this.$nextTick(() => {
                    let url = product.productVideo;
                    let title = product.name;
                    let coverPic=product.videoCover;
                    this.$refs.vodDialogPlayer.playerURL(url, title,coverPic);
                })
            },
            //首页显示
            indexShowChange(){
                console.log("首页显示：",this.product.indexShow);
            }
        }
    }
</script>

<style scoped>
    /*顶部line样式*/
    .topLine {
        background-color: #2a92ee;
    }

    .lineIcon {
        font-size: 22px;
        color: #2a92ee;
        position: relative;
    }

    .lineTitle {
        position: relative;
        font-size: 16px;
        color: #2a92ee;
    }

    /*table样式*/
    .previous-row {
        background: #f0f9eb;
        margin-left: 2%;
        max-width: 96%;

    }

    .optionList {
        text-align: center;
    }

    /deep/ .el-table td, .el-table th {
        padding: 5px 0;
        text-align: center;
    }

    /deep/ .el-table .cell {
        padding-right: 2px;
        line-height: 20px;
        text-align: center;

    }

    /deep/ .el-table .cell, .el-table--border td:first-child .cell, .el-table--border th:first-child .cell {
        padding-left: 5px;
    }

    /*返回上一级*/
    .returnOPT {
        float: left;
        margin-left: 2%;
    }

    .returnBTN {
        padding: 10px 8px;
    }

    .returnIco {
        margin-right: 5px;
        font-size: 16px;
    }

    .returnFont {
        font-size: 16px;

    }

    /*批量操作*/
    .batchOPT {
        float: left;
        margin-left: 2%;
        margin-bottom: 1%;
        z-index: 1;
    }

    /*新增*/
    .addProduct {
        float: left;
        margin-left: 5px;
    }

    .addBTN {
        font-size: 16px;
        padding: 11px 20px;
        border: 1px solid white;
        box-shadow: 1px 2px 2px #409eff;
        margin-top: 0;
    }

    .batchBTN {
        background-color: #ff5202;
        color: white;
        box-shadow: 1px 2px 2px #ff6e02;
    }

    .batchBTN:hover {
        background-color: #ff3d02;
        color: white;
    }

    .batchBTN:focus {
        background-color: #ff3d02;
        color: #ffffff;
    }

    /**分页位置/
     */
    .pageHelper {
        margin-left: 60px;
    }

    .flushBTN {
        position: relative;
        float: left;
        max-width: 95px;
        margin-right: 20px;
        margin-top: 5px;
    }

</style>